<template>
	<view style="overflow-x: hidden;">
		<view class="bg" > </view>
		
		<view class="info" :style="{marginTop: '60rpx'}">
			<image class="info-bg" src="" mode=""></image>
			
			<view class="info-content">
				<view class="info-avatar">
					<image class="info-avatar-pic" :src="userInfo.headimgurl || '../../static/img/head.png'" ></image>
				</view>
				<view class="info-name" style="flex: 1;">
					<text class="info-name">{{userInfo.user_name}}</text>
					<text class="info-level">卡号：{{userInfo.user_phone || phone || '0000'}}</text>
				</view>
				<view class="info-name"> 
					<text class="info-name" style="height: 120rpx;">{{info.is_open}}</text>
				</view>
			</view>
			
			<view class="info-asset">
				<view class="info-asset-item">
					<text class="iai-title">余额</text>
					<text class="iai-value">{{info.balance}}</text>
				</view>
				<view class="info-asset-item">
					<text class="iai-title">累积充值</text>
					<text class="iai-value">{{info.total}}</text>
				</view>
				<view class="info-asset-item">
					<text class="iai-title">会员折扣</text>
					<text class="iai-value">{{info.discount}}</text>
				</view>
			</view>
		</view>
		
		<view class="main-title">
			<text>会员充值</text>
		</view>
		
		<scroll-view scroll-x>
			<view class="recharge">
				<view class="recharge-item" :class="current == index ? 'recharge-item-active': ''" v-for="(item, index) in rechargeOptions" :key="index" :style="{marginLeft: !index ? '30rpx': ''}" @click="rechargeChange(index)">
					<view class="recharge-item-price">
						<text class="rmb">￥</text>
						<text class="recharge-item-price-text">{{ item.price }}</text>
					</view>
					<text class="recharge-item-des" v-for="(desItem, desIndex) in item.des" :key="desIndex">{{ desItem }}</text>
				</view>
			</view>
		</scroll-view>
		
		<view class="button update" hover-class="hover" @click="updateNow">
			<text class="button-text">{{ !info.is_open || info.is_open == '未开通' ? '立即开通' : '立即充值' }} </text>
		</view>
		
		
		<view class="main-title" style="padding-bottom: 10rpx;">
			<text>会员特权</text>
		</view>
		
		<view class="privilege">
			<view> 1, 享受全场折扣 </view>
			<view> 2, 可享受定制化,定时,定周,定月等配送服务 </view>
			<view> 3, 终身制，根据累积消费额度，享受不同的优惠政策 </view>
			<view> 4, 大额大量群预定功能，成本价购物 </view>
			<view> 5, 邀请25人可赠送永久7折优惠 </view>
			<view> 6, 每个节假日，都会推出会员活动，礼品免费拿 </view>
			<view> 7, 每次下单都会累积积分，积分可以税换商品 </view>
		</view>
		
		<tui-modal :show="modal9"  :custom="true" fadeIn >
			<view class="tui-modal-custom">
				<view class="tui-prompt-title">请先绑定手机号码</view>
				<input  placeholder="请输入手机号" class="tui-modal-input" :class="{'tui-hidden-input':!modal9}"  v-model="phone" />
				<!-- <view style="display: flex;width: 80%; margin: auto;">
					<input style="flex: 1;margin-top: 0;"  placeholder="请输入验证码" class="tui-modal-input" :class="{'tui-hidden-input':!code}"  v-model="code" />
					<text>获取验证码</text>
				</view> -->
				<button height="72rpx" :size="28" shape="circle" @click="handleClick9">立即提交</button>
			</view>
		</tui-modal>
		
	</view>
</template>

<script>
	import { mapState,mapActions } from 'vuex'
	import tuiModal from '@/components/thor-ui/tui-modal/tui-modal'
	export default {
		components: {tuiModal},
		data() {
			return {
				current: 0,
				modal9: false,
				phone:"",
				code:"",
				info:{
					is_open:"",
					balance:"0.00",
					total:"0.00",
					discount:"0.0",
				},
				rechargeOptions: [
					{ price: 300, des: ['8折优惠', '返利100'] },
					{ price: 500, des: ['8折优惠', '返利150'] },
					{ price: 800, des: ['7.5折优惠', '返利300'] },
					{ price: 1000, des: ['7折优惠', '返利500'] }
				]
			}
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userInfo']),
		onLoad(){
			this.getInfo();
		},
		onPullDownRefresh() {
			this.getInfo();
		},
		methods: {
			rechargeChange(index) {
				this.current = index
			},
			getInfo(){
				this.$request("/app/v1/Member/getInfo",{}).then(res=>{
					uni.stopPullDownRefresh();
					if(res.data == -1){
						this.info.is_open = "未开通";
					}else{
						this.info.is_open = "v"+ res.data.grade;
						this.info.balance = (res.data.balance).toFixed(2);
						this.info.total = (res.data.total).toFixed(2);
						this.info.discount = Number(res.data.discount || 0) + "折";
					}
				}).catch(res=>{   
					uni.stopPullDownRefresh();
				});
			},
			handleClick9(){
				if(!(/^1[3456789]\d{9}$/.test(this.phone))){ 
					this.$util.msg("手机号错误!");
					return false;
				}
				this.$request("/app/v1/User/updatePhone",{
					phone:this.phone
				}).then(res=>{
					this.modal9 = false;
					this.updateNow();
				});
			},
			updateNow() {
				var that = this;
				let info = this.rechargeOptions[this.current];
				this.$request("/app/v1/Member/createPayOrder",{
					price:info.price,
					des: info.des.join(",")
				}).then(res=>{
					if(res.data == -1){
						this.modal9 = true;
					}else{
						this.$wechat.chooseWXPay({
							order_no: res.data.order_no,
							total_fee:  res.data.order_money,
						},function(){
							that.getInfo();
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.main-title {
		padding: 30rpx 30rpx;
		font-size: 34rpx;
		color: #1C1C1C;
	}
	
	.tip {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #A5A3A2;
	}
	
	.rmb {
		font-size: 32rpx;
		color: #eca32d;
	}
	
	.bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 300rpx;
		z-index: -2;
		background: #000000;
		background: #EA2020;
		border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
		&-img {
			width: 100%;
			height: 100%;
		}
	}
	
	.hover {
		opacity: 0.7;
	}
	
	.info {
		position: relative;
		width: 93%;
		height: 320rpx;
		margin: auto;
		
		&-bg {
			position: absolute;
			width: 100%;
			height: 320rpx;
			z-index: -1;
			background: #444A62;
			border-radius:10px;
		}
		
		&-content {
			padding: 30rpx 50rpx 0 50rpx;
			margin-bottom: 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		
		&-avatar {
			margin-right: 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			width: 85rpx;
			height: 85rpx;
			background-color: #fff;
			padding: 1rpx;
			border-radius: 50%;
			
			&-pic {
				width: 83rpx;
				height: 83rpx;
				border-radius: 50%;
			}
			
		}
		
		&-name {
			display: flex;
			flex-direction: column;
			color: #FFFFFF;
			font-size: 35rpx;
		}
		
		&-level {
			margin-top: 15rpx;
			font-size: 24rpx;
		}
		
		&-asset {
			padding: 0 50rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			
			&-item {
				display: flex;
				flex-direction: column;
				width: 33.33%;
			}
		}
	}
	
	.iai {
		&-title {
			font-size: 24rpx;
			color: #CFB386;
		}
		
		&-value {
			font-size: 35rpx;
			color: #FFFFFF;
		}
	}
	
	.recharge {
		position: relative;
		margin-bottom: 35rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		
		&-tag {
			position: absolute;
			top: -2rpx;
			left: -2rpx;
			width: 170rpx;
			height: 36rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			background-size: 100%;
			
			&-text {
				font-size: 20rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
		
		&-item {
			position: relative;
			padding: 15rpx 0;
			margin-left: 15rpx;
			width: 200rpx;
			min-height: 200rpx;
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			border: solid 2rpx #F2F2F3;
			border-radius: 12rpx;
			
			&-active {
				border-color: #EDD2A9;
				background-color: #FBF1E5;
			}
			
			&-duration {
				margin-bottom: 30rpx;
				font-size: 26rpx;
				color: #1C1C1C;
			}
			
			&-price {
				display: flex;
				flex-direction: row;
				align-items: baseline;
				
				&-text {
					font-size: 48rpx;
					color: #ea9d21;
				}
			}
			
			&-des {
				font-size: 22rpx;
				color: #545454;
			}
		}
	}
	
	.button {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 85rpx;
		border-radius: 50rpx;
		background: #EBCA96;
		&-text {
			font-size: 30rpx;
			color: #1C1C1C;
		}
	}
	
	.update {
		margin: 35rpx 30rpx 20rpx 30rpx;
	}
	
	.privilege {
		padding: 0 40rpx;
		font-size: 34rpx;
		color: #1C1C1C;
		padding-bottom: 40rpx;
		view{
			line-height:60rpx;
		}
	}

	// 弹窗
	.tui-modal-custom {
		text-align: center;
	}
	.tui-prompt-title {
		padding-bottom: 20rpx;
		font-size: 34rpx;
	}
	.tui-modal-input {
		width: 80%;
		border-bottom: 1rpx solid #e6e6e6;
		margin: 30rpx auto 50rpx;
		padding-bottom: 20rpx;
		font-size: 32rpx;
		text-align: left;
	}
	
</style>
